<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/teacher/teacher-holiday.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<style>
			body {
				padding: 20px;
				background-color: white;

			}
		</style>
	</head>
	<body>
		
		<!--绑定的模态框开始-->
		<!-- Modal -->
		<div class="modal fade" id="addHoliday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">申请请假</h4>
					</div>
					<div class="modal-body">
		
						<!-- 角色绑定的表单 开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<label for="beginTime" class="col-sm-2 control-label">开始时间</label>
								<div class="col-sm-10">
									<input type="datetime-local" name="beginTime" class="form-control" aria-describedby="basic-addon1">
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">结束时间</label>
								<div class="col-sm-10">
									<input type="datetime-local" name="endTime" class="form-control" aria-describedby="basic-addon1">
								</div>
							</div>
							<div class="form-group">
								<label for="reason" class="col-sm-2 control-label">原因</label>
								<div class="col-sm-10">
									<input type="text" name="reason" class="form-control" aria-describedby="basic-addon1">
								</div>
							</div>
						</form>
						<!-- 角色绑定的表单 结束 -->
		
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="guanbi">关闭</button>
						<button type="button" id="modalAddHolidayButton" class="btn btn-primary">绑定</button>
					</div>
				</div>
			</div>
		</div>
		<!--绑定的模态框结束-->
		
		<div class="container" id="main">
			<!-- 路径导航开始-->
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
						<li><a style="text-decoration: none;" href="#">老师模块</a></li>
						<li><a style="text-decoration: none;" href="#">请假审批</a></li>
					</ol>
				</div>
			</div>
			<!-- 路径导航结束-->

			<!-- 按钮开始-->
			<div class="row">
				<div class="col-md-4">
					<button class="btn btn-primary" id="pass" name="900200" @click="updatePassHoliday()">审批</button>
					<button class="btn btn-danger" id="reject" name="900100" @click="updateRejectHoliday()">驳回</button>
				</div>
			</div>
			<!-- 按钮结束-->

			<!-- 表格开始-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover">
						<tr>
							<th><!-- <input id="selectAllHoliday" type="checkbox"> -->#</th>
							<th>id</th>
							<th>姓名</th>
							<th>开始时间</th>
							<th>结束时间</th>
							<th>原因</th>
							<th>状态</th>
						</tr>
						<tr v-for="holiday,index in holidayBeans">
							<td><input class="check-role" type="checkbox" :value="index" v-model="ids" ></td>
							<td>{{index+1}}</td>
							<td>{{holiday.name}}</td>
							<td>{{holiday.beginTime}}</td>
							<td>{{holiday.endTime}}</td>
							<td>{{holiday.reason}}</td>
							<td>{{holiday.approve}}</td>
						</tr>
							<!--分页组件开始-->
						<tr style="background-color: white;">
							<td colspan="2">
								<span class="glyphicon glyphicon-flag"></span>
								第
								<span class="pageNumber">{{pageNumber}}</span>
								页
								&nbsp;
								<span class="glyphicon glyphicon-align-justify"></span>
								每页
								<span class="totalPage">{{pageSize}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-check"></span>
								总记录
								<span class="totalCounter">{{totalCounter}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-briefcase"></span>
								共
								<span class="totalPage">{{totalPage}}</span>
								页
							</td>
							<td colspan="4">
								<!-- 分页按钮开始 -->
								<nav aria-label="Page navigation">
									<ul class="pagination">

										<!-- 第1页 -->
										<li id="firstPage"><a href="#">&lt;&lt;</a></li>

										<!-- 上1页 -->
										<li id="prePage"><a href="#">&lt;</a></li>

										<!-- 下1页 -->
										<li id="nextPage"><a href="#">&gt;</a></li>

										<!-- 最后1页 -->
										<li id="lastPage"><a href="#">&gt;&gt;</a></li>
									</ul>
								</nav>
								<!-- 分页按钮开始 -->
							</td>
						</tr>
						<!--分页组件结束-->

					</table>
				</div>
			</div>
			<!-- 表格结束-->
		</div>
	</body>
</html>
